<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../css/aui.css"/>
		<link rel="stylesheet" type="text/css" href="../icon/aosen/css/font-awesome.min.css" />
    <style>
    body,html{
        background:#f2f2f2;
    }
    .game-msg{
        width: 100%;
        height: 5rem;
        background: white;
    }
    .game-title{
      padding-top: 0.5rem;
      padding-right: 0.5rem;
    }
    .game-price{
        font-size: 6vw;
        color: #ff4800;
        padding-top: 0.5rem
    }
    .game-icon{
      height: 100%;
      display:flex;
			display:-webkit-flex;
			flex-direction: column;
			-webkit-justify-content: center;
  		justify-content: center;
    }
    .game-info{
      height: 100%;
      display:flex;
			display:-webkit-flex;
			flex-direction: column;
			-webkit-justify-content: center;
  		justify-content: center;
    }
    .icon-box{
      width: 80%;
      background: white;
      border-radius: 5px;
      overflow: hidden;
      margin: 0 auto;
    }
    .icon-box img{
      width: 100%;
      height: 100%;
      display: block;
    }
    .contect-way{
      width: 100%;
      height: 2rem;
      line-height: 2rem;
      padding-left: 0.3rem;
      color: #757575;
      background: white;
    }
    .box{
      display:flex;
      display:-webkit-flex;
      height: 2.5rem;
      width: 100%;
      margin-top: 1px;
      background: white;
      padding: 0 0.5rem
    }
    .box div{
      height: 100%;
      line-height: 2.5rem
    }
    .bottom{
        width: 100%;
        height: 3rem;
        position: fixed;
        bottom: 0;
        left: 0;
    }
    .bottom div{
        height:100%;
        text-align: center;
        line-height: 3rem;
        color: white;
        font-size: 4.5vw;
    }
    #kefu{
    	width: 2.5rem;
    	height: 2.5rem;
    	border-radius: 50%;
    	background: #ff4800;
    	position: absolute;
    	bottom: 3rem;
    	right: 0;
    	touch-action: none;
    	overflow:hidden;
    }
    #kefu img{
    	width:90%;
    	height:80%;
    	display:block;
    	margin: 0 auto;
    	margin-top:0.25rem;
    }
    </style>
</head>
<body id="body">
  <div class="game-msg aui-margin-t-10 aui-row">
    <div class="game-icon aui-col-xs-3">
      <div class="icon-box">
        <img src="" id="proIcon">
      </div>
    </div>
    <div class="aui-col-xs-9 game-info">
      <div class="game-title aui-ellipsis-2" id="proWord"></div>
      <div class="game-price">&yen;<span id="pri"></span></div>
    </div>
  </div>
  <div class="contect-way aui-margin-t-10">平台服务：</div>
  <div class="aui-list-item" style="padding:0.7rem 0.5rem;background:white;margin-top: 1px;">
     <div class="aui-list-item-inner" style="">
       <span id="serName"></span>
      <input class="aui-radio aui-pull-right" type="checkbox" status="OFF" name="radio" onclick="chooseSer(this)">
    </div>
  </div>
  <div class="contect-way aui-margin-t-10">联系方式：</div>
  <div class="box">
     <div>
       <span style="color: red;margin-right: 0.3rem;font-size: 3vw">*</span>手机号码：
     </div>
     <div class="aui-list-item-input">
        <input type="text"  placeholder="请输入手机号码" style="height: 2.5rem" id="pnoneNum"/>
     </div>
  </div>
  <div class="box">
     <div>
       <span style="color: red;margin-right: 0.3rem;font-size: 3vw">*</span>QQ号码：
     </div>
     <div class="aui-list-item-input">
        <input type="text"  placeholder="请输入QQ号码" style="height: 2.5rem" id="qqNum"/>
     </div>
  </div>
  <div class="contect-way aui-margin-t-10">换绑信息：</div>
  <div class="box">
     <div>
       <span style="color: red;margin-right: 0.3rem;font-size: 3vw">*</span>绑定手机：
     </div>
     <div class="aui-list-item-input">
        <input type="text"  placeholder="请输入手机号码" style="height: 2.5rem" id="bdpnoneNum"/>
     </div>
  </div>
  <div class="box" style="margin-bottom:3rem">
     <div>
       <span style="color: red;margin-right: 0.3rem;font-size: 3vw">*</span>绑定邮箱：
     </div>
     <div class="aui-list-item-input">
        <input type="text"  placeholder="请输入邮箱" style="height: 2.5rem" id="email"/>
     </div>
  </div>
  <div class="bottom aui-row">
      <div class="aui-col-xs-8" style="background:white">
        <div style="width:100%;height:50%;line-height:1.5rem;padding-right:0.3rem;text-align:right">
          <span style="color:black">实付款：&yen;</span>
          <span style="color:red" id="finalPrice"></span>
        </div>
        <div style="width:100%;height:50%;line-height:1.5rem;padding-right:0.3rem;text-align:right;color:#666666;font-size:2vh">
          <span>其中平台服务费：&yen;</span>
          <span id="serPrice"></span>
        </div>
      </div>
      <div class="aui-col-xs-4" style="background:#ff4800" onclick="goToPay()" id="goToPay">立即支付</div>
			<div class="aui-col-xs-4 aui-hide" style="background:#ddd;color:white" id="cantbuy"></div>
  </div>
  <div id="kefu" onclick="openServicePer()">
  	<img src="../icon/kefu.png"  />
  </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/request.js"></script>
<script type="text/javascript" src="../script/drap.js"></script>
<script type="text/javascript" src="../script/kefu.js"></script>
<script type="text/javascript">
  $api.css($api.dom('.icon-box'), 'height:'+$api.offset($api.dom('.icon-box')).w+'px');
  var proId;
  var obj;
  var oInfo = {};
	apiready = function(){
		
	    proId = api.pageParam.data.id;
	    getProMsg();
	};
	
  function goToPay(){
    if(!(/^1[3|4|5|7|8][0-9]\d{4,8}$/.test($api.val($api.byId('pnoneNum'))))){
        api.toast({
            msg: '您输入的手机号码格式有误，请重新输入！',
            duration: 4000,
            location: 'bottom'
        });
        return false;
    }

    if(!(/[1-9][0-9]{4,14}/.test($api.val($api.byId('qqNum'))))){
        api.toast({
            msg: '您输入的QQ号码格式有误，请重新输入！',
            duration: 4000,
            location: 'bottom'
        });
        return false;
    }
    if(!(/^1[3|4|5|7|8][0-9]\d{4,8}$/.test($api.val($api.byId('bdpnoneNum'))))){
        api.toast({
            msg: '您输入的绑定号码格式有误，请重新输入！',
            duration: 4000,
            location: 'bottom'
        });
        return false;
    }
    if(!(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test($api.val($api.byId('email'))))){
        api.toast({
            msg: '您输入的邮箱格式有误，请重新输入！',
            duration: 4000,
            location: 'bottom'
        });
        return false;
    }
    createOrder();
  }
  function getProMsg(){
    var data = {};
    data['values'] = {};
    data['values']['proId'] = proId;
    requestData('Order/getOrderInt',data,'NO','NO','NO',_callbackInt);
  }
  function _callbackInt(ret){
    if(ret.status == 200){
      obj = ret;
			if(ret.proInfo.goods_status == 'sold'){
				$api.addCls($api.byId('goToPay'), 'aui-hide');
				$api.removeCls($api.byId('cantbuy'), 'aui-hide');
				$api.text($api.byId('cantbuy'), '已售罄');
			}else if (ret.proInfo.goods_status == 'downsale') {
				$api.addCls($api.byId('goToPay'), 'aui-hide');
				$api.removeCls($api.byId('cantbuy'), 'aui-hide');
				$api.text($api.byId('cantbuy'), '已下架');
			}else {
				$api.removeCls($api.byId('goToPay'), 'aui-hide');
				$api.addCls($api.byId('cantbuy'), 'aui-hide');
			}
      $api.attr($api.byId('proIcon'), 'src', pictureUrl+ret.proInfo.game_icon);
      $api.text($api.byId('proWord'), ret.proInfo.game_name+'【'+ret.proInfo.server+'】'+ret.proInfo.goods_word);
      $api.text($api.byId('pri'),ret.proInfo.goods_price);
      $api.text($api.byId('serName'),ret.serInfo.service_name);
      $api.text($api.byId('finalPrice'), ret.proInfo.goods_price);
      $api.text($api.byId('serPrice'), '0.00');
    }
  }
  function chooseSer(tag){
    if($api.attr(tag,'status') == 'OFF'){
      $api.attr(tag,'status','ON')
    }else{
      $api.attr(tag,'status','OFF')
    }
    if($api.attr(tag,'status') == 'ON'){
      $api.text($api.byId('finalPrice'), obj.final_price);
      $api.text($api.byId('serPrice'), obj.service_price);
    }else{
      $api.text($api.byId('finalPrice'), obj.proInfo.goods_price);
      $api.text($api.byId('serPrice'), '0.00');
    }
  }
  function createOrder(){
    var data = {};
    data['values'] = {};
    data['values']['userId'] = $api.getStorage('userId');
    data['values']['porId'] = proId;
    data['values']['phoneNum'] = $api.val($api.byId('pnoneNum'));
    data['values']['qqNum'] = $api.val($api.byId('qqNum'));
    data['values']['bindPhone'] = $api.val($api.byId('bdpnoneNum'));
    data['values']['bindEmail'] = $api.val($api.byId('email'));
    data['values']['servicePrice'] = $api.text($api.byId('serPrice'));
    data['values']['finalPrice'] = $api.text($api.byId('finalPrice'));
    requestData('Order/createOrder',data,'NO','NO','NO',_callbackRelt);
  }
  function _callbackRelt(ret){
    if(ret.status == 200){
      api.toast({
          msg: ret.msg,
          duration: 4000,
          location: 'bottom'
      });
      var body = $api.text($api.byId('proWord'));
      var subject = obj.shopInfo.shop_name;
      var out_trade_no = ret.orderNum;
      var total_amount = $api.text($api.byId('finalPrice'));
      var product_code = 'QUICK_MSECURITY_PAY';

      goToAlipay(body,subject,out_trade_no,total_amount,product_code);
    }else{
      api.toast({
          msg: ret.msg,
          duration: 4000,
          location: 'bottom'
      });
    }
  }
  function goToAlipay(body,subject,out_trade_no,total_amount,product_code){
	var data = {};
	data['values'] = {};
	data['values']['body'] = body;
	data['values']['subject'] = subject;
	data['values']['out_trade_no'] = out_trade_no;
	data['values']['total_amount'] = total_amount;
	data['values']['product_code'] = product_code;
	oInfo['orderNum'] = out_trade_no;
	oInfo['shopName'] = subject;
	oInfo['goods'] = body;
	oInfo['payMoney'] = total_amount;
	requestData('Pay/aliPay',data,'NO','NO','NO',_callbackOrderInfo);
  }
function _callbackOrderInfo(ret){
	if(ret.status == 200){
		var aliPayPlus = api.require('aliPayPlus');
		aliPayPlus.payOrder({
			orderInfo:htmlspecialchars_decode(ret.orderInfo)
		},function(ret,err){
			if(ret.code == 8000){
				api.openWin({
		            name: 'payErr',
		            url: './payErr.html',
		            pageParam:{
		            	data:'正在处理中...请稍候！'
		            }
	            });
			}else if(ret.code == 4000){
				api.openWin({
		            name: 'payErr',
		            url: './payErr.html',
		            pageParam:{
		            	data:'订单支付失败!'
		            }
	            });
			}else if(ret.code == 6001){
				api.openWin({
		            name: 'payErr',
		            url: './payErr.html',
		            pageParam:{
		            	data:'您已经取消支付！'
		            }
	            });
			}else if(ret.code == 6002){
				api.openWin({
		            name: 'payErr',
		            url: './payErr.html',
		            pageParam:{
		            	data:'网络故障！请稍候查看'
		            }
	            });
			}else if(ret.code == 9000){
				var myDate = new Date();
				var year = myDate.getFullYear();
				var month = myDate.getMonth()*1+1;
				var day = myDate.getDate();
				var hours = myDate.getHours();
				var minute = myDate.getMinutes();
				var second = myDate.getSeconds();
				oInfo['payTime'] = year+'-'+month+'-'+day+' '+hours+':'+minute+':'+second;
				oInfo['orderType'] = 'shop';
				if(oInfo){
					api.openWin({
			            name: 'payOk',
			            url: './payOk.html',
			            pageParam:{
			            	data:oInfo
			            }
		            });
				}
			}
		});
	}else{
		api.toast({
          msg: ret.msg,
          duration: 4000,
          location: 'bottom'
       });
       setTimeout(function(){
       		window.location.reload();
       },1000);
	}
}
function htmlspecialchars_decode(str){
	str = str.replace(/&amp;/g, '&');
	str = str.replace(/&lt;/g, '<');
	str = str.replace(/&gt;/g, '>');
	str = str.replace(/&quot;/g, "''");
	str = str.replace(/&#039;/g, "'");
	return str;
}
</script>
</html>
